<!-- 商品列表 -->
<template>
  <div v-loading="loading">
    <el-header>
      <el-space wrap>
        <!-- 搜索部分 -->
        <el-input
          clearable
          v-model.trim="configReq.title"
          @keyup.enter="getInfo"
          placeholder="输入商品名称"
        />
        <el-input
          clearable
          v-model.trim="configReq.barcode"
          @keyup.enter="getInfo"
          placeholder="输入商品条形码"
        />
        <el-select
          v-model="configReq.status"
          clearable
          placeholder="请选择商品状态"
        >
          <el-option
            v-for="item in options.status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-cascader
          clearable
          @focus="getCategory"
          v-model="configReq.categoryId"
          :props="props"
          placeholder="请选择类目"
          :options="categoryList"
          :show-all-levels="false"
        />
        <el-button type="primary" :icon="Search" @click="debounce(getInfo)"
          >查找</el-button
        >
        <el-button
          type="primary"
          :icon="Plus"
          @click="this.$router.push({ name: 'create' })"
          v-btn="'product:product:create'"
          >添加</el-button
        >
      </el-space>
    </el-header>
    <el-container>
      <!-- 表格部分 -->
      <el-table :data="infoList" border align="center">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column
          label="sku信息"
          type="expand"
          align="center"
          width="60"
        >
          <template #default="scope">
            <el-table :height="300" :data="scope.row.skuList" border>
              <el-table-column prop="barCode" label="商品条码" align="center" />
              <el-table-column prop="title" label="商品标题" align="center" />
              <el-table-column prop="stock" label="商品库存" align="center" />
              <el-table-column
                prop="originalPrice"
                label="原价"
                align="center"
              />
              <el-table-column prop="price" label="现价" align="center" />
              <el-table-column width="500" />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="商品ID" align="center" width="90" />
        <el-table-column prop="title" label="名称" align="center" width="480" />
        <el-table-column label="图片" align="center">
          <template #default="scope">
            <el-image style="height: 35px" :src="scope.row.img" />
          </template>
        </el-table-column>
        <el-table-column
          label="商品详细介绍"
          width="90"
          align="center"
          v-btn="'product:product:detail'"
        >
          <template #default="scope">
            <el-button type="primary" @click="lookDetails(scope.row.id)"
              >查看</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="categoryId"
          label="类目ID"
          width="90"
          align="center"
        />
        <el-table-column
          prop="freightTemplateId"
          label="邮费模板ID"
          align="center"
        />
        <el-table-column prop="sales" label="销量" align="center" />
        <el-table-column prop="unit" label="单位" align="center" />
        <el-table-column label="是否在售" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status ? 'success' : 'warning'">{{
              scope.row.status ? "在售" : "下架"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
          align="center"
          width="480"
        />
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button
              type="primary"
              @click="
                this.$router.push({
                  name: 'edit',
                  params: { id: scope.row.id },
                })
              "
              v-btn="'product:product:edit'"
              >编辑</el-button
            >
            <el-button
              :type="scope.row.status ? 'warning' : 'success'"
              @click="debounce(changeStatus, scope.row)"
              >{{ scope.row.status ? "下架" : "激活" }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 详情弹出框 -->
      <el-dialog v-model="dialogVisible" :width="800" title="商品详情">
        <div v-html="detailHtml"></div>
      </el-dialog>
    </el-container>
    <div style="margin: 20px 0px">
      <!-- 分页组件 -->
      <paging v-bind="pageInfo" @changeReq="changeConfig"></paging>
    </div>
  </div>
</template>

<script>
import { post } from "@/utils/http";
import { Search, Plus } from "@element-plus/icons-vue";
import Paging from "@/components/paging/Paging";
export default {
  setup() {
    return {
      Search,
      Plus,
    };
  },
  components: { Paging },
  data() {
    return {
      loading: false, //是否正在加载
      infoList: [], //数据列表
      categoryList: [], //类目列表
      dialogVisible: false, //是否显示详情弹出框
      detailHtml: "", //详情的html片段
      // 类目树
      // 请求表格数据的配置
      configReq: {
        _gp: "admin.product",
        _mt: "list",
        title: "", //商品名称
        page: 1, //跳转页数
        limit: 5, //显示条数
        barcode: "", //条形码
        status: null, //商品状态
        categoryId: null, //类目ID
      },
      // 传给分页组件的数据
      pageInfo: {
        page: 1, //跳转页数
        limit: 5, //显示条数
        total: 0,
      },
      // 选择器数据
      options: {
        status: [
          { value: 0, label: "下架" },
          { value: 1, label: "正常" },
        ],
      },
      // 类目级联选择器的配置
      props: {
        label: "title",
        children: "childrenList",
        value: "id",
        emitPath: false,
        checkStrictly: true,
      },
    };
  },
  methods: {
    // 获取表格数据的方法
    getInfo() {
      this.loading = true; //显示加载
      post(this.configReq)
        .then((res) => {
          if (200 == res?.errno) {
            //成功状态码
            // console.log(res);
            let { items, total } = res.data;
            this.infoList = items; //获取表格信息
            this.pageInfo.total = total; //获取总条数
            this.loading = false; //加载完毕
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 组件触发的数据改变
    changeConfig(data) {
      Object.assign(this.configReq, data);
      this.getInfo();
    },
    // 请求类目列表
    getCategory() {
      if (this.categoryList.length) return; //在没有类目数据的时候请求
      post({ _gp: "admin.category", _mt: "categoryTree" }).then((res) => {
        if (200 == res?.errno) {
          //成功状态码
          this.categoryList = res.data;
        }
      });
    },
    //查看详情
    lookDetails(spuId) {
      this.dialogVisible = true;
      post({ _gp: "admin.product", _mt: "detail", spuId }).then((res) => {
        if (200 == res?.errno) this.detailHtml = res.data.detail;
      });
    },
    // 切换状态的操作
    changeStatus(data) {
      let { id: spuId, status } = data;
      post({
        _gp: "admin.product",
        _mt: "freezeOrActivation",
        status: status ? 0 : 1,
        spuId,
      })
        .then((res) => {
          if (200 == res?.errno) {
            ElMessage.success(status ? "下架成功" : "激活成功");
            this.getInfo(); //更新数据
          }
        })
        .catch((err) => console.log(err));
    },
  },
  created() {
    this.getInfo();
  },
};
</script>

<style scoped lang="less">
.el-header {
  height: auto;
  margin-bottom: 20px;
}
</style>
